<template>
  <div class="rooms-main">
    <div class="nav-back-header">
      <div class="back-title">
        <div class="back-button">
          <img class="back-cover" src="@/assets/images/arrow-left.png" @click="onNavigationBack()"/>
        </div>
        <strong>群列表</strong>
      </div>
      <img class="divider" src="@/assets/images/divider.png" />
      <div class="room-name">萨克斯音乐培训班</div>
    </div>
    <div class="rooms-wrap">
      <div class="left-group-list">
        <div class="group-title">分组</div>
        <div class="group-item">
          <span class="group-name">萨克斯</span>
          <div class="desc">
            <span style="color: rgb(251, 88, 78);">可用群：0</span>
            <span>总：2</span>
          </div>
        </div>
      </div>
      <div class="right-group-data">
        <div class="right-group-head">
          <el-button class="create-group" type="primary" size="small" @click="showCheckDialog = true">
            <i class="el-icon-plus"></i>
            <span>新群</span>
          </el-button>
          <el-dropdown placement="bottom">
              <el-input class="search-input" size="small" suffix-icon="el-icon-arrow-down" />
              <el-dropdown-menu slot="dropdown">
                <div class="threshold-content">
                  <div class="input-rows">
                    <el-input placeholder="最小值" style="width: 88px"/>
                    <span class="delimiter">~</span>
                    <el-input placeholder="最大值" style="width: 88px"/>
                  </div>
                  <el-button class="submit-button" type="primary" size="small">确定</el-button>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          <div style="margin-left: 8px;">
            <el-input class="search-input" size="small" placeholder="群名称" suffix-icon="el-icon-search" style="width: 218px;" />
          </div>
        </div>
        <div class="room-list">
          <div class="room-item">
            <div class="item-body">
              <div class="group-info">
                <img class="group-cover" src="https://qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/1f2d93740bf8dc458cd395528e84b532.png" />
                <div class="goup-context">
                  <div class="name">cathy</div>
                  <div class="count">13</div>
                </div>
              </div>
              <div class="group-total">
                <div class="total-item">
                  <span>长按人数</span>
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">在群活码落地页长按识别该群二维码<br/>的人数（不包含直接手机扫码入群的<br/>人数）</div>
                    <svg-icon icon-class="iquestion" style="margin-left: 8px;"/>
                  </el-tooltip>：
                  <span class="number">0</span>
                </div>
                <div class="total-item">
                  <span>进群人数</span>
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">该群加入当前活码开始到现在为止的<br/>进群人数（不是通过该活码进群的人<br/>数也会统计在内）</div>
                    <svg-icon icon-class="iquestion" style="margin-left: 8px;"/>
                  </el-tooltip>：
                  <span class="number">0</span>
                </div>
                <div class="total-item">
                  <span>上限人数：</span>
                  <span class="number">180</span>
                </div>
                <div class="total-item">
                  <span>在群企微号：</span>
                  <a>1</a>
                </div>
              </div>
            </div>
            <div class="footer-rows">
              <div class="group-status-grid">
                <div class="grid-item">
                  群状态：
                  <span class="status-wrapper">
                    <span class="round error"></span>
                    <span class="status-text">异常</span>
                  </span>
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">获取群二维码失败，请确认是否存在<br/>以下情况：<br/>
                      1、群被解散；<br/>
                      2、在群企微号均未登录企微宝云端版；<br/>
                      3、在群企微号均已退群；<br/>
                      4、群主开启“群聊邀请确认”。<br/>
                      【温馨提示】：第2、3、4三种情况<br/>下，群还能正常进人，只是群活码下<br/>不参与分配。第4点所述情况包括手动<br/>开启”
                      群邀请确认“和外部联系人数量不<br/>足时企微自动开启<br/>”群邀请确认“两种情况。</div>
                    <i class="el-icon-info" style="  margin-left: 8px;color: rgb(255, 73, 73)"></i>
                  </el-tooltip>
                </div>
                <div class="grid-item">
                  分配状态：
                  <span class="status-wrapper">
                    <span class="round warning"></span>
                    <span class="status-text">自动暂停 </span>
                  </span>
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">群异常解除后会自动恢复为分配中状<br/>态</div>
                    <svg-icon icon-class="iquestion" style="margin-left: 8px;"/>
                  </el-tooltip>
                </div>
                <div class="grid-item">
                  建群时间：2024-01-08 14:02
                </div>
              </div>
              <div class="button-list">
                <el-button plain class="button">刷新二维码</el-button>
                <el-button plain class="button">停用</el-button>
                <el-button plain class="button" @click="showDialog = true">数据</el-button>
                <el-dropdown style="margin-left: 8px;">
                  <el-button plain class="button">排序</el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>置顶</el-dropdown-item>
                    <el-dropdown-item>上移</el-dropdown-item>
                    <el-dropdown-item>下移</el-dropdown-item>
                    <el-dropdown-item>置底</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <DayTableDialog :visible="showDialog" @onHandleClose="onHanleDialogClose"/>
    <SelectGroupDialog :visible="showCheckDialog" @onHandleClose="onHanleCheckDialogClose" />
  </div>
</template>
<script>
import DayTableDialog from './components/DayTableDialog.vue'
import SelectGroupDialog from './components/SelectGroupDialog.vue'
export default {
  data() {
    return {
      showDialog: false,
      showCheckDialog: false,
      cities: [{
        value: 0,
        label: '志新'
      }, {
        value: 1,
        label: '锐行'
      }]
    }
  },
  components: {
    DayTableDialog,
    SelectGroupDialog
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },
    onNavigationBack(){
      this.$router.go(-1);
    },
    onHanleDialogClose() {
      this.showDialog = false
    },
    onHanleCheckDialogClose() {
      this.showCheckDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.rooms-main {
  .nav-back-header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    .back-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;
      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-right: 12px;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        cursor: pointer;
        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
    .divider {
      margin: 0 20px;
      width: 1px;
      height: 16px;
    }
    .room-name {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, .45);
    }
  }
  .rooms-wrap {
    height: calc(100% - 80px);
    margin: 16px;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: stretch;
    .left-group-list {
      border-right: 1px solid #f0f0f0;
      width: 240px;
      padding: 16px;
      overflow: auto;
      .group-title {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(0, 0, 0, .85);
      }
      .group-item {
        margin-top: 8px;
        padding: 8px;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        &.active {
          border: 1px solid #3070ff;
        }
        .group-name {
          font-size: 14px;
          color: rgba(0, 0, 0, .85);
        }
        .desc {
          margin-top: 4px;
          font-size: 12px;
          line-height: 28px;
          color: rgba(0, 0, 0, .45);
          display: flex;
          span {
            display: block;
            width: 80px;
          }
        }
      }
    }
    .right-group-data {
      flex: 1 1;
      padding: 16px;
      .right-group-head {
        display: flex;
        align-items: center;
        .create-group {
          margin-right: 8px;
        }
      }
      .room-list {
        margin-top: 16px;
        .room-item {
          border-radius: 4px;
          border: 1px solid #f0f0f0;
          margin-bottom: 16px;
          .item-body {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            .group-info {
              display: flex;
              align-items: center;
              .group-cover {
                width: 40px;
                height: 40px;
              }
              .goup-context {
                margin-left: 8px;
                .name {
                  font-size: 14px;
                  color: #222333;
                  line-height: 22px;
                }
                .count {
                  font-size: 12px;
                  color: #888999;
                }
              }
            }
            .group-total {
              display: grid;
              grid-template-columns: 1fr 1fr 1fr 1fr;
              column-gap: 32px;
              .total-item {
                display: flex;
                align-items: center;
                color: rgba(0,0,0,.45);
                font-size: 14px;
                .number {
                  color: rgba(0,0,0,.85);
                }
                a {
                  color: #3070ff;
                  background-color: transparent;
                  outline: none;
                  cursor: pointer;
                }
              }
            }
          }
          .footer-rows {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f5f5f5;
            padding: 12px 16px;
            border-top: 1px solid #f0f0f0;
            .group-status-grid {
              display: flex;
              .grid-item {
                font-size: 14px;
                line-height: 22px;
                display: flex;
                align-items: center;
                &:not(:first-child) {
                  margin-left: 32px;
                }
                .status-wrapper {
                  display: flex;
                  align-items: center;
                  .round {
                    display: block;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    &.error {
                      background: #f5222d;
                    }
                    &.warning {
                      background: #faad14;
                    }
                  }
                  .status-text {
                    margin-left: 8px;
                    color: rgba(0, 0, 0, .65);
                    font-size: 14px;
                  }
                }
              }
            }
            .button-list {
              .button {
                height: 24px;
                padding: 0.8px 7px;
                font-size: 13px;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }
}
</style>